<!-- 富民订单详情 -->
<template>
    <div class="content">
        <el-row class="title_block enterprise_info hpx-title-border">
            <span class="title_text">企业信息</span>
            <span class="col"><span class="hpx-label">卖方名称：</span>{{model.billOriginName}}</span>
            <span class="col"><span class="hpx-label">买方名称：</span>{{model.status > 3 ? '速贴银行' : ''}}</span>
        </el-row>
        <el-row class="detail_mian">
            <el-col :span="12" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">票据信息</span>
                </el-row>
                <el-form label-width="120px" size="mini" class="detail_info">
                    <el-form-item label="票据号:">{{model.billNumber}}</el-form-item>
                    <el-form-item label="承兑人全称:">{{model.acceptor}}</el-form-item>
                    <el-form-item label="承兑机构:">{{model.acceptorTypeName}}</el-form-item>
                    <el-form-item label="票面金额:" class="hpx-red-tips"><span class="remind">{{model.billPrice}}万元</span></el-form-item>
                    <el-form-item label="到期时间:">{{model.dueDate | formatDate}}</el-form-item>
                    <!--<el-form-item label="汇票瑕疵:" class="hpx-red-tips">{{formatArr}}</el-form-item>-->
                    <!--<el-form-item label="背书次数:">{{model.endorsement_number}}</el-form-item>-->
                    <el-row class="imgs imgs_discount">
                        <el-col :span="5" :offset="1" v-if="model.billFrontPhoto">
                            <!--<img :src="model.billFrontPhoto" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.billFrontPhoto"
                            ></ImageZoom>
                            <el-row class="tag">票据正面</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.billBackPhoto1">
                            <!--<img :src="model.bill_back_photo_path1" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.billBackPhoto1"
                            ></ImageZoom>
                            <el-row class="tag">背书面1</el-row>
                        </el-col>
                        <el-col :span="5" :offset="1" v-if="model.billBackPhoto2">
                            <!--<img :src="model.bill_back_photo_path2" alt="">-->
                            <ImageZoom
                                    :width='165'
                                    :height='146'
                                    mode='preview'
                                    :image="model.billBackPhoto2"
                            ></ImageZoom>
                            <el-row class="tag">背书面2</el-row>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">订单信息</span>
                </el-row>
                <el-form label-width="90px" size="mini" class="detail_info">
                    <el-form-item label="订单号码:">{{model.orderNumber}}</el-form-item>
                    <el-form-item label="贴现利率:" class="hpx-red-tips">{{model.billRate}}%</el-form-item>
                    <el-form-item label="每十万加:" class="hpx-red-tips">{{model.everyOneHunderdThousandPlus}}元</el-form-item>
                    <el-form-item label="成交金额:" class="hpx-red-tips remind"><span class="remind">{{model.transactionAmount}}万元</span></el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6" class="mian_block">
                <el-row class="title_block bill_info hpx-title-border">
                    <span class="title_text">操作</span>
                </el-row>
                <div class="order_status" v-if="model.status == 2">
                    <el-row class="text_center">平台审核中</el-row>
                </div>
                <div class="order_status" v-if="model.status == 4">
                    <el-row class="text_center">银行锁定额度中</el-row>
                </div>
                <div v-if="model.status == 5">
                    <el-row class="text_right"><el-button type="primary" plain @click="closeOrder()">取消订单</el-button></el-row>
                    <el-row class="text_center">银行已锁定额度</el-row>
                    <el-row class="text_center remind hpx-red-tips">请企业完成提票</el-row>
                    <el-row class="text_center hpx-red-tips hpx-red-tips2"><i class="iconfont icon-tishi"></i>请于10分钟内，在网银端向速贴银行发起贴现申请</el-row>
                    <el-row class="text_center hpx-look-img"><a href="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/tipiaoshiyitu.png" target="_blank"><i class="iconfont icon-chakan"></i>查看示意图</a> </el-row>
                    <el-row class="bank_info_box">
                        <el-form label-width="145px" size="mini" class="bank_box_con">
                            <el-form-item label="贴入银行名称名称：">重庆富民银行股份有限公司</el-form-item>
                            <el-form-item label="贴入人(行)账号：">0</el-form-item>
                            <el-form-item label="贴入行行号：">323653010015</el-form-item>
                            <el-form-item label="清算方式：">线下清算</el-form-item>
                        </el-form>
                        <el-col :span="24"  class="text_center">
                            <el-button type="primary"
                                v-clipboard:copy="bankInfo"
                                v-clipboard:success="onCopy"
                                v-clipboard:error="onError"
                            >复制</el-button>
                        </el-col>
                    </el-row>
                </div>

                <!-- 交易中止 -->
                <div class="order_status" v-if="model.status == 7 || model.status == 8">
                    <el-row class="text_center"><i class="iconfont icon-jiaoyiguanbi"></i></el-row>
                    <el-row class="text_center">交易已中止</el-row>
                    <el-row class="text_center hpx-red-tips hpx-red-bg"><i class="iconfont icon-jingshi"></i>原因：{{model.tradeResult}}</el-row>
                    <el-row class="text_center box-btn">
                        <el-button type="primary" @click="anewPublishDiscount()">重新发起</el-button>
                    </el-row>
                </div>

                <!-- 交易完成 -->
                <div class="order_status" v-if="model.status == 6">
                    <el-row class="text_center"><i class="iconfont icon-chenggong"></i></el-row>
                    <el-row class="text_center">恭喜您交易完成</el-row>
                    <el-row class="text_center">
                        <el-button type="primary" @click="uploadVoucher()">下载贴现凭证</el-button>
                    </el-row>
                    <el-row class="text_center hpx-red-tips hpx-red-tips2">银行系统自动收票并付款至企业提票账户, 资金最快一分钟到账。</el-row>
                </div>

                <!-- 提票失败 -->
                <div class="order_status_box" v-if="model.status == 9">
                    <el-row class="text_center"><i class="iconfont icon-jiaoyiguanbi"></i></el-row>
                    <el-row class="text_center">提票失败</el-row>
                    <el-row class="text_center hpx-red-tips hpx-red-bg"><i class="iconfont icon-jingshi"></i>原因：{{model.tradeResult}}</el-row>
                    <el-row class="text_center remind hpx-red-tips hpx-red-tips3">请重新在网银端向速贴银行发起贴现申请</el-row>
                    <el-row class="bank_info_box">
                        <el-form label-width="145px" size="mini" class="bank_box_con">
                            <el-form-item label="贴入银行名称名称：">重庆富民银行股份有限公司</el-form-item>
                            <el-form-item label="贴入人(行)账号：">323653010015</el-form-item>
                            <el-form-item label="贴入行行号：">0</el-form-item>
                            <el-form-item label="清算方式：">线下清算</el-form-item>
                        </el-form>
                        <el-col :span="24"  class="text_center">
                            <el-button type="primary"
                                       v-clipboard:copy="bankInfo"
                                       v-clipboard:success="onCopy"
                                       v-clipboard:error="onError"
                            >复制</el-button>
                        </el-col>
                    </el-row>
                </div>

                <!-- 审核失败 -->
                <div class="order_status" v-if="model.status == 3">
                    <el-row class="text_center"><i class="iconfont icon-jiaoyiguanbi"></i></el-row>
                    <el-row class="text_center">审核失败</el-row>
                    <el-row class="text_center hpx-red-tips hpx-red-bg"><i class="iconfont icon-jingshi"></i>原因：{{model.tradeResult}}</el-row>
                    <el-row class="text_center box-btn">
                        <el-button type="primary" @click="anewPublishDiscount()">重新发起</el-button>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Table from '@component/common/HpxTable.vue';
    import DialogInput from '@component/common/DialogInput.vue';
    import Clipboard from 'cipboard';
    import ImageZoom from '@component/common/ImageZoom.vue';
    import { mapActions, mapState, mapMutations } from 'vuex';
    import moment from 'moment';
    @Component({
        components: {
            Table,
            DialogInput,
            ImageZoom
        },
        computed: {
            ...mapState({
                sysTime: 'sysTime'
            })
        },
        methods: {
            ...mapActions([
                'getAllTips',
                'getSysTime'
            ])
        }
    })
    export default class DiscountOrderDetail extends Vue {
        model:any = {}
        //获取订单详情
        async getDiscountDetailData () {
            let res = await this.$http.get(`fbank/trade/getBill/${this.$route.params.id}`)
            if(res.status == 200){
                this.model = res.data
            }
        }
        // get formatArr () {
        //     return this.model.billFlawName ? this.model.billFlawName.join('，') : ''
        // }
        bankInfo: string = '贴入银行名称：重庆富民银行股份有限公司；'+
                            '贴入人(行)账号：323653010015；'+
                            '贴入行行号：0；'+
                            '清算方式：线下清算。';
        onCopy () {
            this.$alert('复制成功','提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box',
                // center: true,
                callback: action => {}
            })
        }
        onError () {
            this.$alert('复制失败','提示',{
                confirmButtonText: '确定',
                customClass: 'custom-message-box',
                callback: action => {}
            })
        }
        // 取消订单
        closeOrder () {
            this.$confirm('是否取消该订单！','提醒',{
                confirmButtonText: '是',
                cancelButtonText: '否',
                customClass: 'custom-message-box'
            }).then(() => {
                this.confirmCloseOrder();
            }).catch((err) => {
                console.log(err)
            })
        }
        async confirmCloseOrder () {
            let res = await this.$http.put(`fbank/trade/cancel/${this.model.id}`)
            if(res.status == 200){
                this.getAllTips();
                this.$alert('订单取消成功！','提示',{
                    // confirmButtonText: '确定',
                    customClass: 'custom-message-box close-order-box',
                    callback: action => {
                        this.$router.push('/discount/order')
                    }
                })
            }
        }
        // 下载凭证
        async uploadVoucher () {
            let res = await this.$http.get('fbank/trade/downloadVoucher')
        }
        // 重新发起速贴
        anewPublishDiscount () {
            let systemTime = moment(this.sysTime).format('HH:mm:ss')
            let tradTime = '17:00:00'
            if (systemTime > tradTime) {
                this.$confirm('银行速贴业务办理时间：09:00 - 17:00！', '提示', {
                    confirmButtonText: '前往了解速贴业务介绍',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box',
                }).then(() => {
                    let backUrl = /back=.+$/.exec(location.hash);
                    location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/discount.html";
                }).catch(() => {

                })
                // return false
            }
            this.$router.push(`/discount/publish/${this.model.id}`)
        }

        mounted () {
            this.getDiscountDetailData();
            this.getSysTime();
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_info{
        height: 50px;
        line-height: 50px;
    }
    .bill_info{
        height: 30px;
        line-height: 30px;
    }
    .detail_mian{
        .mian_block{
            height: 594px;
        }
    }
    .el-form-item__label{
        color: $__color-label !important;
    }
    .el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
        line-height: 20px !important;
    }
    .company{
        text-align: center;
    }
    .order_status{
        margin-top: 100px;
    }
    .remind{
        font-size: 20px;
    }
    .row_text{
        line-height: 50px;
    }
    .hpx-success .iconfont{
        font-size: 60px;
    }
    .hpx-red-tips2 {
        line-height: 20px !important;
    }
    .hpx-look-img {
        color: $__color-link;
    }
    .bank_info_box {
        border: 1px solid $__color-border;
        border-radius: 4px;
        margin: 20px 6% 0 6%;
        padding-bottom: 18px;
    }
    .bank_box_con {
        padding: 8px 0 16px 0;
        .el-form-item--mini.el-form-item {
            margin-bottom: 5px;
        }
    }
    .icon-jiaoyiguanbi {
        color: $__color-remind;
        font-size: 30px;
    }
    .icon-chenggong {
        color: $__color-success-remind;
        font-size: 30px;
    }
    .hpx-red-bg {
        background: $__color-bg-unimportance;
        margin: 0 6%;
        line-height: 20px !important;
        padding: 5px 0;
    }
    .box-btn {
        margin-top: 40px;
    }
    .order_status_box {
        margin-top: 50px;
        .hpx-red-tips3 {
            line-height: 24px !important;
            margin-top: 10px;
        }
    }
    .text_right {
        text-align: right;
        margin-bottom: 50px;
    }
    .imgs_discount {
        margin-top: 25px;
    }

</style>
<style lang="scss">
    .close-order-box {
        .el-message-box__btns {
            display: none !important;
        }
    }
</style>
